<template>
  <div class="VFormModel">
    <h1>This is an VFormModel page</h1>

    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item
        ref="name"
        label="Activity name"
        prop="name"
      >
        <a-input
          v-model="form.name"
          @blur="
          () => {
            $refs.name.onFieldBlur();
          }
        "
        />
      </a-form-model-item>

      <a-form-model-item
        has-feedback
        ref="name_two"
        label="Activity name_two"
      >
        <a-input v-model="form.name_two" />
      </a-form-model-item>

      <a-form-model-item
        label="Activity zone"
        prop="region"
      >
        <a-select
          v-model="form.region"
          placeholder="please select your zone"
        >
          <a-select-option value="shanghai">
            Zone one
          </a-select-option>
          <a-select-option value="beijing">
            Zone two
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="Activity time"
        required
        prop="date1"
      >
        <a-date-picker
          v-model="form.date1"
          show-time
          type="date"
          placeholder="Pick a date"
          style="width: 100%;"
        />
      </a-form-model-item>
      <a-form-model-item
        label="Instant delivery"
        prop="delivery"
      >
        <a-switch v-model="form.delivery" />
      </a-form-model-item>
      <a-form-model-item
        label="Activity type"
        prop="type"
      >
        <a-checkbox-group v-model="form.type">
          <a-checkbox
            value="1"
            name="type"
          >
            Online
          </a-checkbox>
          <a-checkbox
            value="2"
            name="type"
          >
            Promotion
          </a-checkbox>
          <a-checkbox
            value="3"
            name="type"
          >
            Offline
          </a-checkbox>
        </a-checkbox-group>
      </a-form-model-item>
      <a-form-model-item
        label="Resources"
        prop="resource"
      >
        <a-radio-group v-model="form.resource">
          <a-radio value="1">
            Sponsor
          </a-radio>
          <a-radio value="2">
            Venue
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item
        label="Activity form"
        prop="desc"
      >
        <a-input
          v-model="form.desc"
          type="textarea"
        />
      </a-form-model-item>

      <a-form-model-item
        has-feedback
        label="Age"
        prop="age"
      >
        <a-input v-model.number="form.age" />
      </a-form-model-item>

      <a-form-model-item>
        <a-input placeholder="Basic usage" />
        <a-textarea
          placeholder="Autosize height with minimum and maximum number of lines"
          :auto-size="{ minRows: 2, maxRows: 6 }"
        />
        <a-textarea
          placeholder="Basic usage"
          :rows="4"
        />
        <a-input
          ref="userNameInput"
          placeholder="Basic usage"
        >
          <a-icon
            slot="prefix"
            type="user"
          />
          <a-tooltip
            slot="suffix"
            title="Extra information"
          >
            <a-icon
              type="info-circle"
              style="color: rgba(0,0,0,.45)"
            />
          </a-tooltip>
        </a-input>

        <a-input
          prefix="￥"
          suffix="RMB"
        />

        <a-input-search
          placeholder="input search loading deault"
          loading
        />
        <br />
        <br />
        <a-input-search
          placeholder="input search loading with enterButton"
          loading
          enter-button
        />

        <a-input-search
          placeholder="input search text"
          style="width: 200px"
        />
        <br /><br />
        <a-input-search
          placeholder="input search text"
          enter-button
        />
        <br /><br />
        <a-input-search
          placeholder="input search text"
          enter-button="Search"
          size="large"
        />
        <br /><br />
        <a-input-search
          placeholder="input search text"
          size="large"
        >
          <a-button slot="enterButton">
            Custom
          </a-button>
        </a-input-search>

        <a-input-group
          size="large"
          compact
        >
          <a-input
            style="width: 20%"
            default-value="0571"
          />
          <a-input
            style="width: 30%"
            default-value="26888888"
          />

          <a-input-number
            :default-value="1000"
            :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/\$\s?|(,*)/g, '')"
            @change="onChange"
          />
          <a-input-number
            :default-value="100"
            :min="0"
            :max="100"
            :formatter="value => `${value}%`"
            :parser="value => value.replace('%', '')"
            @change="onChange"
          />

        </a-input-group>

        <a-input-password placeholder="input password" />
        <a-input-number
          default-value="1"
          :min="1"
          :max="10"
          :step="0.01"
        />
      </a-form-model-item>

      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button
          type="primary"
          @click="onSubmit"
        >
          Create
        </a-button>
        <a-button
          style="margin-left: 10px;"
          @click="resetForm"
        >
          Reset
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
export default {
  data() {
      let checkPending;
    let checkAge = (rule, value, callback) => {
      clearTimeout(checkPending);
      if (!value) {
        return callback(new Error('Please input the age'));
      }
      checkPending = setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('Please input digits'));
        } else {
          if (value < 18) {
            callback(new Error('Age must be greater than 18'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: '',
      form: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        name_two:'',
        age:'',
      },
      rules: {
        name: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' },
          { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
        region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
        date1: [{ required: true, message: 'Please pick a date', trigger: 'change' }],
        type: [
          {
            type: 'array',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change',
          },
        ],
        resource: [
          { required: true, message: 'Please select activity resource', trigger: 'change' },
        ],
        desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
       age: [{  required: true, validator: checkAge, trigger: 'change' }],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    onChange(value) {
      console.log('changed', value);
    },
  },
};
</script>